import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { F2Chart, Pie, Line, Area, Column } from '../../components/my-f2'
import { PieProps, LineProps, AreaProps, ColumnProps } from '../../components/my-f2/type'
import { pieMock, lineMock, areaMock, columnMock } from './mock'

import './index.scss'

const defaultPieProps = {
  cn: 'pie',
  series: [],
  radius: 1,
  innerRadius: 0,
  cascade: false,
  pieLabel: false,
  sidePadding: 40,
  tooltip: false,
  legend: false
}

const defaultLineProps = {
  cn: 'line',
  categories: [],
  series: [],
  xAxis: {
    tickCount: 3
  },
  yAxis: {
    tickCount: 3
  },
  tooltip: false,
  legend: false
}

interface PageState {
  pieChartData: PieProps
  lineChartData: LineProps
}
export default class Chart extends Component<{}, PageState> {
  constructor(props) {
    super(props)
    this.state = {
      pieChartData: defaultPieProps as PieProps,
      lineChartData: defaultLineProps as LineProps
    }
  }

  componentWillMount () { }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        pieChartData: pieMock[0] as PieProps,
        lineChartData: lineMock[0] as LineProps
      })
    })
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onInitChart(F2, config) {
    const chart = new F2.Chart(config);
    const data = [
      { value: 63.4, city: 'New York', date: '2011-10-01' },
      { value: 62.7, city: 'Alaska', date: '2011-10-01' },
      { value: 72.2, city: 'Austin', date: '2011-10-01' },
      { value: 58, city: 'New York', date: '2011-10-02' },
      { value: 59.9, city: 'Alaska', date: '2011-10-02' },
      { value: 67.7, city: 'Austin', date: '2011-10-02' },
      { value: 53.3, city: 'New York', date: '2011-10-03' },
      { value: 59.1, city: 'Alaska', date: '2011-10-03' },
      { value: 69.4, city: 'Austin', date: '2011-10-03' },
    ];
    chart.source(data, {
      date: {
        range: [0, 1],
        type: 'timeCat',
        mask: 'MM-DD'
      },
      value: {
        max: 300,
        tickCount: 4
      }
    });
    chart.area().position('date*value').color('city').adjust('stack');
    chart.line().position('date*value').color('city').adjust('stack');
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  }

  render () {
    // const lineData = lineMock[0] as LineProps
    const areaData = areaMock[0] as AreaProps
    // const pieChartData = pieMock[0] as PieProps
    const ringData = pieMock[1] as PieProps
    const labellinePie = pieMock[2] as PieProps
    const columnData = columnMock[0] as ColumnProps
    const stackcolumnData = columnMock[1] as ColumnProps
    const dodgeData = columnMock[2] as ColumnProps

    const { pieChartData, lineChartData } = this.state

    console.log('pieChartData:', pieChartData)
    console.log('lineChartData:', lineChartData)
    return (
      <View className='index'>
        {/* <View className='f2-chart'>
          <F2Chart onInit={this.onInitChart}></F2Chart>
        </View> */}
        <View><Text>Pie</Text></View>
        { pieChartData && (
          <View>
          <Pie
            series={pieChartData.series}
            radius={pieChartData.radius}
            style={pieChartData.style}
            legend={pieChartData.legend}
            tooltip={pieChartData.tooltip}
          />
          {/* <Pie
            series={pieChartData.series}
            radius={pieChartData.radius}
            style={pieChartData.style}
            legend={pieChartData.legend}
            tooltip={pieChartData.tooltip}
          /> */}
          </View>
        )}
        {/* { ringData &&
          <Pie
            series={ringData.series}
            radius={ringData.radius}
            innerRadius={ringData.innerRadius}
            legend={ringData.legend}
            guide={ringData.guide}
          />
        }
        { labellinePie &&
          <Pie
            series={labellinePie.series}
            radius={labellinePie.radius}
            style={labellinePie.style}
            legend={labellinePie.legend}
            tooltip={labellinePie.tooltip}
            pieLabel={labellinePie.pieLabel}
            activeShape={labellinePie.activeShape}
            sidePadding={labellinePie.sidePadding}
          />
        } */}
        <View><Text>线图</Text></View>
        { lineChartData &&
          <Line
            categories={lineChartData.categories}
            series={lineChartData.series}
            xAxis={lineChartData.xAxis}
            yAxis={lineChartData.yAxis}
            legend={lineChartData.legend}
            tooltip={lineChartData.tooltip}
          />
        }
        {/* <View><Text>区域图</Text></View>
        { areaData &&
          <Area
            categories={areaData.categories}
            series={areaData.series}
            xAxis={areaData.xAxis}
            yAxis={areaData.yAxis}
            legend={areaData.legend}
            tooltip={areaData.tooltip}
          />
        } */}
        {/* <View><Text>柱状图</Text></View>
        { columnData &&
          <Column
            categories={columnData.categories}
            series={columnData.series}
            xAxis={columnData.xAxis}
            yAxis={columnData.yAxis}
            legend={columnData.legend}
          />
        } */}
        {/* { stackcolumnData &&
          <Column
            categories={stackcolumnData.categories}
            series={stackcolumnData.series}
            xAxis={stackcolumnData.xAxis}
            yAxis={stackcolumnData.yAxis}
            legend={stackcolumnData.legend}
            adjust={stackcolumnData.adjust}
          />
        } */}
        {/* { dodgeData &&
          <Column
            categories={dodgeData.categories}
            series={dodgeData.series}
            xAxis={dodgeData.xAxis}
            yAxis={dodgeData.yAxis}
            legend={dodgeData.legend}
            adjust={dodgeData.adjust}
          />
        } */}
      </View>
    )
  }
}
